<?php
$title = "Opprett Bruker";
$siteCss = "forms";
include 'include/overall/header.php';

?>
<br />
<div class='container'>
    <div class="row">
        <div class='col-lg-12'>
            <h2 class='page-header'>
                Opprett ny bruker <small>Fyll inn informasjon i skjemaet nedenfor</small>
            </h2>
        </div>
    </div>
    <div class="row">
        <div class='col-lg-6'>
            <h3 class='page-header'>Examples</h3>
        </div>
        <div class='col-lg-6'>
          <h3 class='page-header'>
             Specifications
          </h3>
        </div>
    </div>
    <div class="row">
        <div class='col-lg-6'>
        <div class='panel'>
                <div class='panel-heading'><h4 class='panel-title'>Valid values required <code>[data-vreq=1 data-vtype=*]</code></h4></div>
                <form>
                    <div class='row'>
                        <div class='col-lg-4'>
                            <input id='phone'
                                   class='form-control input-md' 
                                   placeholder='Telefon nummer'
                                   data-vtype='phone_NO'
                                   data-vreq='1'/>
                        </div>
                    </div>
                    <br/>
                    <div class='row'>
                        <div class='col-lg-4'>
                        passord
                            <input id='password'                            	 
                                   class='form-control input-md' 
                                   placeholder='Passord'
                                   data-vtype='password'
                                   data-vreq='1'/>
                        </div>
                    </div>
                    <div class='row'>
                        <div class='col-lg-4'>
                        username
                            <input id='username'                            	 
                                   class='form-control input-md' 
                                   placeholder='Brukernavn'
                                   data-vtype='username'
                                   data-vreq='1'/>
                        </div>
                    </div>
                    <BR>
                    <div class='row'>
                        <div class='col-lg-4'>
                        email
                            <input id='lastname'
                                   class='form-control input-md' 
                                   placeholder='Email'
                                   data-vreq='1'
                                   data-vtype='email'/>
                        </div>
                        <div class='col-lg-8'>
                            <h5>Value required, and must be valid email. </h5><code>[data-vreq=1 data-vtype='email']</code>
                        </div>
                    </div>
                        <BR>
                     <div class='row'>
                        <div class='col-lg-4'>
                            <a 
                               class='btn btn-md btn-primary'
                               data-vsubmit='1' 
                               data-vfunc='doSomething' 
                               data-vclear='1'>Submit</a>
                        </div>
                        <div class='col-lg-8'>
                        </div>
                    </div>
                </form>
            </div>
        </div>        
        <div class='col-lg-6'>
        <h5>Features</h5>
            <ul>
                <li>Uses Ajax to validate input.</li>
                <li>Can be easily modified to check a database for on the fly app-specific validation.</li>
                <li>Basic setup using only <code>[data-]</code> properties in HTML tags.</li>
                <li>Uses Bootstrap Tooltips for a streamlined & functional user interface.</li>
                <li>Only one single <code>.js</code> file to add to your page, and <code>.php</code> file to add to your server.</li>
                <li>Works with <a href='https://github.com/alxlit/bootstrap-chosen'>bootstrap-chosen</a> improved select boxes.</li>
            </ul>
            <h5>Dependencies</h5>
            <ul>
                <li>Requires jQuery 2.0.2+</li>
                <li>Requires Bootstrap Tooltips (Bootstrap 2 or 3)</li>
            </ul>
        </div>
    </div>
    
    <br/>
    <div class="row">
        <div class='col-lg-6'>
            <div class='panel'>
                <div class='panel-heading'><h4 class='panel-title'>Values required <code>[data-vreq=*]</code></h4></div>
                <form id='form1'>
                    <div class='row'>
                        <div class='col-lg-6'>
                            <input id='firstname'
                                   class='form-control input-md' 
                                   placeholder='First Name'
                                   data-vreq='1'/>
                        </div>
                        <div class='col-lg-6'>
                            <h5>Type anything in this field. </h5><code>[data-vreq=1]</code>
                        </div>
                    </div>
                    <BR>
                    <div class='row'>
                        <div class='col-lg-6'>
                            <input id='lastname'
                                   class='form-control input-md' 
                                   placeholder='Last Name'
                                   data-vreq='0'/>
                        </div>
                        <div class='col-lg-6'>
                            <h5>No value required here. </h5><code>[data-vreq=0]</code>
                        </div>
                    </div>
                        <BR>
                     <div class='row'>
                        <div class='col-lg-3'>
                            <a 
                               class='btn btn-md btn-primary'
                               data-vsubmit='1' 
                               data-vfunc='doSomething' 
                               data-vclear='1'>Submit</a>
                        </div>
                        <div class='col-lg-6'>
                            <h5>Make anything a submit button. </h5><code>[data-vsubmit=1]</code>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <br />
    <div class="row">
        <div class='col-lg-12'>
            <div class='panel'>
                <div class='panel-heading'><h4 class='panel-title'>Optional (but valid) values <code>[data-vreq=0 data-vtype=*]</code></h4></div>
                <form>
                    <div class='row'>
                        <div class='col-lg-4'>
                            <input id='firstname'
                                   class='form-control input-md' 
                                   placeholder='Phone Number (optional)'
                                   data-vtype='phone_CA'
                                   data-vreq='0'/>
                        </div>
                        <div class='col-lg-8'>
                            <h5>This input does not require a value, but if entered it must be valid. </h5><code>[data-vreq=0 data-vtype='phone_CA']</code>
                        </div>
                    </div>
                    <BR>
                    <div class='row'>
                        <div class='col-lg-4'>
                            <input id='lastname'
                                   class='form-control input-md' 
                                   placeholder='Postal Code (optional)'
                                   data-vreq='0'
                                   data-vtype='postal_CA'/>
                        </div>
                        <div class='col-lg-8'>
                            <h5>This input does not require a value, but if entered must be valid. </h5><code>[data-vreq=0 data-vtype='postal_CA']</code>
                            <P>Tests for valid Canadian Postal Code, try any of these:
                                <ul>
                                    <li>t4t4t4</li>
                                    <li>T1W 4T9</li>
                                    <li>t4t-4t4</li>
                                    <li>V1Y.1W3</li>
                                    <li>and any other way you can think of.</li>
                                </ul>
                            </p>
                        </div>
                    </div>
                        <BR>
                     <div class='row'>
                        <div class='col-lg-4'>
                            <a 
                               class='btn btn-md btn-primary'
                               data-vsubmit='1' 
                               data-vfunc='doSomething' 
                               data-vclear='1'>Submit</a>
                        </div>
                        <div class='col-lg-8'>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="row">
        <div class='col-lg-12'>
            <div class='panel'>
                <div class='panel-heading'><h4 class='panel-title'>bootstrap-chosen select boxes <code>[data-vreq=*]</code></h4></div>
                <form>
                    <div class='row'>
                        <div class='col-lg-4'>
                            <select class="chosen chosen-select-deselect"
                                    id='province'
                                    data-vreq='1'>
                                <option value=''></option>
                                <option value='AB'>Alberta</option>
                                <option value='BC'>British Columbia</option>
                                <option value='SK'>Saskatchewan</option>
                                <option value='MB'>Manitoba</option>
                                <option value='ON'>Ontario</option>
                                <option value='QC'>Quebec</option>
                                <option value='NB'>New Brunswick</option>
                                <option value='PE'>Prince Edward Island</option>
                                <option value='NL'>Newfoundland & Labrador</option>
                                <option value='NS'>Nova Scotia</option>
                                <option value='YK'>Yukon</option>
                                <option value='NW'>North-West Territories</option>
                                <option value='NT'>Nunavut</option>
                            </select>
                        </div>
                        <div class='col-lg-8'>
                            <h5>This input is required.  Just add the <code>.chosen</code> class to the select box. </h5><code>[data-vreq=1]</code>
                        </div>
                    </div>
                     <BR>
                     <div class='row'>
                        <div class='col-lg-4'>
                            <a 
                               class='btn btn-md btn-primary'
                               data-vsubmit='1' 
                               data-vfunc='doSomething' 
                               data-vclear='1'>Submit</a>
                        </div>
                        <div class='col-lg-8'>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<BR><BR><BR><BR>

<?php include 'include/overall/footer.php';?>